/**
 * @description 历史内容区域
 */
import TmIcon from 't/basic/icon';
import { useQuasar } from '@teld/q-components';
import { defineComponent, ref, toRefs, watch } from 'vue';
// import { filterContent } from '../mock';
export default defineComponent({
  name: 'FilterPreview',
  components: { TmIcon },
  props: {
    plan: Object,
    currectPlan: String,
    filter: Object,
    isReadOnly: Boolean,
    isHideBorder:Boolean,
    operateMoreByButton:Function,
    filterGroups:Array,
    filterServer:Array
  },
  setup(props, { emit }) {
    const { plan, currectPlan, filter,filterGroups,filterServer } = toRefs(props);
    const isOpen = ref(false);
    const $q = useQuasar();
    // 比较符设置
    const getCondition = (current,code) => {
      let target = filterGroups?.value?.find(items=>items.Code==current.Code)||{}
      return [
        { value: '=', text: $q.lang.queryPlan.mobile.equal },
        { value: '>', text: $q.lang.queryPlan.mobile.greaterThan },
        { value: '>=', text: $q.lang.queryPlan.mobile.greaterThanOrEqual },
        { value: '<', text: $q.lang.queryPlan.mobile.lessThan },
        { value: '<=', text: $q.lang.queryPlan.mobile.lessThanOrEqual },
        { value: '<>', text: $q.lang.queryPlan.mobile.notEqual },
        { value: 'between', text: '' }, //之间不展示
        { value: 'contains', text: $q.lang.queryPlan.mobile.contains },
        { value: 'notcontains', text: $q.lang.queryPlan.mobile.notContains },
        { value: 'in', text: $q.lang.queryPlan.mobile.in },
        { value: 'notin', text: $q.lang.queryPlan.mobile.notin },
        { value: 'isnotblank', text: $q.lang.dataGrid.filterOperation.isNotBlank },
        { value: 'isblank', text: $q.lang.dataGrid.filterOperation.isBlank },
        { value: '[=]', text:   `${$q.lang.queryPlan.mobile.equal}`},
        { value: '[<>]', text: `${$q.lang.queryPlan.mobile.notEqual}`},
        { value: '[<]', text: `${$q.lang.queryPlan.mobile.lessThan}`},
        { value: '[>]', text: `${$q.lang.queryPlan.mobile.greaterTha}`},
        { value: '[<=]', text: `${$q.lang.queryPlan.mobile.lessThanOrEqual}`},
        { value: '[>=]', text:`${$q.lang.queryPlan.mobile.greaterThanOrEqual}`},


      ].filter(item => (target?.Condition||current.Condition) == item.value)[0]?.text;
    };
    watch(
      () => isOpen.value,
      () => {
        emit('openChange');
      },
    );
    const getName =(target)=> {
      if(target.ValueName){
       if(Array.isArray(target.ValueName) ){
        return target.ValueName.map(item=>item.label).join(',')
       } else{
        return target.ValueName
       }
      }else if(target.Value){
        if(Array.isArray(target.Value) ){
          return target.Value.map(item=>item.label).join(',')
         } else{
          return target.Value
         }
      }

    }
    const generateFilter = () => {
      const Template = [];
      if (filter.value.Filters) {
        let mapppingFilterTerms ={}
        filterServer.value.filter(item => item.isQuery).map(item=>{
          if(item.ValueInfo_fieldName){
            mapppingFilterTerms[item.tableAlias + '.' + item.fieldCode] =  Funcs.GetTerms(item.ValueInfo_fieldName.ReferenceExpr,item.fieldName)
          }
        });
        filter.value.Filters.forEach(item => {
          let target = filterGroups?.value?.find(items=>items.Code==item.Code)||{}
          if(!target) target=item
          if (item.ElementType == 'Filter' && (item.Value || item.ValueName||target.Condition=='isnotblank'||target.Condition=='isblank')) {
            if ((item.Value||item.Value==='0'||item.Value===0)&&target.Condition == 'between'&&(!Array.isArray(item.Value)||item.Value.join('').trim()) ) {

              Template.push(
                <span>
                  <i>{mapppingFilterTerms[item.Code] || item.Name}</i>
                  <i>{getCondition(item, item.Code)}</i>
                  <i class='value'>
                    {item.Value.indexOf('@')>-1
                      ? item.Value
                      : item.Value && item.Value.join && item.Value.join(' - ')}
                  </i>
                  {(() => {
                    if (!props.isReadOnly) {
                      return (
                        <tm-icon
                          name='close'
                          onClick={() => {
                            deleteFilter(item);
                          }}
                        />
                      );
                    }
                  })()}
                </span>,
              );
            } else if(((item.Value||item.Value==='0'||item.Value===0)&&target.Condition != 'between')&&(!Array.isArray(item.Value)||item.Value.join('').trim())||(target.Condition=='isnotblank'||target.Condition=='isblank')) {

              Template.push(
                <span>
                  <i>{mapppingFilterTerms[item.Code]||item.Name}</i>
                  <i>{getCondition(item,item.Code)}</i>
                  <i class='value'>
                    {getName(item)}
                    {/* {item.ValueName || (item.Value && item.Value.join && item.Value.join(' - '))||item.Value} */}
                  </i>
                  {(()=>{
                    if(!props.isReadOnly){
                      return  <tm-icon
                      name='close'
                      onClick={() => {
                        deleteFilter(item);
                      }}
                    />
                    }
                  })()}
                </span>,
              );
            }
          }
        });
      }
      return Template;
    };
    const deleteFilter = e => {
      filter.value.Filters.forEach(element => {
        if (element.Code == e.Code) {
          element.Value = '';
          element.ValueName = '';
          // let target = filterGroups.value?.find(item=>item.Code==e.Code)
          // target&&(target.Condition='=')

        }
      });
      emit('update:filter', filter.value);
      emit('update:filterGroups', filterGroups.value);
    };
    const clearAll = e => {};


    const render = () => {
      return (
        <div>
            {(() => {
              if (!props.isReadOnly) {
                return (
                  <>
                  <div class='filterPreview' >
                  <p class='currentPlan'>
                    <span>{$q.lang.queryPlan.title.selectedFilter}</span>{' '}
                    {(() => {
                      if (

                        filter.value&& filter.value.Filters.filter(item => {
                          let target = filterGroups?.value?.find(items=>items.Code==item.Code)||{}
                          if (item.Value == '' && item.Value != 0&&target.Condition!='isnotblank'&&target.Condition!='isblank') return false;
                          if (
                           ( !item.Value ||
                            (item.Value.join &&
                              item.Value.join('').trim() == ''))&&target.Condition!='isnotblank'&&target.Condition!='isblank'
                          ) {
                            return false;
                          }

                          return true;
                        }).length
                      ) {
                        return (
                          <span class='numberTag'>
                            {
                              filter.value&&filter.value.Filters.filter(item => {
                                let target = filterGroups?.value?.find(items=>items.Code==item.Code)||{}
                                if (item.Value == '' && item.Value != 0&&target.Condition!='isnotblank'&&target.Condition!='isblank')
                                  return false;
                                if (
                                  (!item.Value ||
                                  (item.Value.join &&
                                    item.Value.join('').trim() == ''))&&target.Condition!='isnotblank'&&target.Condition!='isblank'
                                ) {
                                  return false;
                                }

                                return true;
                              }).length
                            }
                          </span>
                        );
                      }
                    })()}
                  </p>
                    <p class='operate'>
                    <span
                      onClick={() => {
                        isOpen.value = !isOpen.value;
                      }}
                      style='padding-left: 8px;font-size:12px'
                    >
                      {!isOpen.value?$q.lang.queryPlan.title.collapse:$q.lang.queryPlan.title.expand}
                      {(() => {
                        if (isOpen.value) {
                          return (
                            <tm-icon
                              style='font-size:12px'
                              name='icon-t-arrow-down'
                            />
                          );
                        }
                        return (
                          <tm-icon
                            style='font-size:12px'
                            name='icon-t-arrow-up'
                          />
                        );
                      })()}
                    </span>
                    <span onClick={()=>{
                      props.operateMoreByButton({value:'reset'})
                    }} style='padding-left: 8px;font-size:12px;color:var(--t-color)'>重置</span>
                    <i class={'fas dx-icon icon-t-delete-outlined'}  onClick={()=>{
                        props.operateMoreByButton({value:'clear'})
                      }}    style='padding-left: 8px;font-size:12px'></i>

                  </p>
                   </div>
                  </>
                );
              }
            })()}



          {(() => {
            if (
              !isOpen.value && filter.value&&
              filter.value.Filters.filter(
                item =>{
                  let target = filterGroups?.value?.find(items=>items.Code==item.Code)||{}
                  return (item.Value && !item.Value.slice) ||
                  item.ValueName ||
                  (item.Value &&
                    item.Value.slice &&
                    (item.Value[1] || item.Value[0]))||target.Condition=='isnotblank'||target.Condition=='isblank'
                }
              ).length
            ) {
              return (
                <div class='filterPreviewContent' style={`${props.isReadOnly?'padding:0;column-gap: 100%;':''}padding-top:8px`}>
                  {generateFilter()}
                </div>
              );
            } else {
              return (
                <div class='filterPreviewContent'>
                  <span style={'height:0'}></span>
                </div>
              );
            }
          })()}
          {(()=>{
            if(!props.isHideBorder){
              return  <p class='line'></p>
            }
          })()}

        </div>
      );
    };
    return render;
  },
});
